<!-- 表格模块 -->
<div class="table-module">
    <div style="display: flex;justify-content: space-between;">
        <div class="module-header">
            <i class="el-icon-tickets"></i>
            <span class="table-title-info">{{abc.bname}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{abc.cname}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{dicts[0].value}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{dicts[1].value}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{dicts[2].value}}</span>
        </div>
        <div>
            <!-- 操作按钮组 -->
            <div class="action-buttons">
                <el-button-group>
                    <el-button type="success" @click="action('copy')" icon="el-icon-cpu">复制</el-button>
                    <el-button type="primary" @click="action('add')" icon="el-icon-plus">新增</el-button>
                    <el-button type="warning" @click="action('edit')" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" icon="el-icon-download" @click="action('delete')" >删除</el-button>
                </el-button-group>
            </div>
        </div>
    </div>
    <div class="table-container">
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                border
                @selection-change="handleSelectionChangeTable"
        >

            <el-table-column type="selection" label="选择" width="60" align="center"></el-table-column>

            <el-table-column  prop="port" label="端口"  align="center" >
                <template slot-scope="scope">
                    <div>
                        <el-link :href="scope.row.url" target="_blank">
                            <span style="color:#e2e2d7db;">
                                <el-tag effect="dark" type="plain">{{scope.row.port}}</el-tag>
                            </span>
                        </el-link>
                    </div>
                </template>
            </el-table-column>

            <el-table-column  prop="title" label="标题"  align="center" >
                <template slot-scope="scope">
                    <div>
                        <el-link :href="scope.row.url" target="_blank">
                            <span style="color:#e2e2d7db;">{{scope.row.title}}</span>
                        </el-link>
                    </div>
                </template>
            </el-table-column>

            <el-table-column  prop="username" label="用户名"  align="center" >
                <template slot-scope="scope">
                    <div>
                        <span>{{scope.row.username}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column  prop="password" label="密码"  align="center" >
                <template slot-scope="scope">
                    <div>
                        <span>{{scope.row.password}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true"  prop="url" label="链接"  align="center" >
                <template slot-scope="scope">
                    <div>
                        <el-link :href="scope.row.url" target="_blank">
                            <span style="color:#e2e2d7db;">{{getDictValue(scope.row.osDictId, 0)}}</span>
                        </el-link>
                    </div>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true"  prop="url" label="链接"  align="left" :width="300" >
                <template slot-scope="scope">
                    <div>
                        <el-link :href="scope.row.url" target="_blank">
                            <span style="color:#e2e2d7db;">{{scope.row.url}}</span>
                        </el-link>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页器 -->
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>

    </div>
</div>